<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" v-if="address" :editable="false" />

    <!-- 商品卡片 -->
    <van-card
        v-for="(item, key) in product"
        :title="item.products.name"
        :thumb="item.products.thumbs_text"
        :num="item.pronum"
        @click-thumb="toProductInfo(item.proid)"
    >
        <template #title>
        <div class="title">{{item.products.name}}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
        <van-tag v-for="(attr,index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
        </template>
        <template #desc v-else>
        <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
        <div class="price">单价：￥{{item.price}}</div>
        </template>

        <template #price>
        <div class="price">合计：￥{{item.total}}</div>
        </template>
    </van-card>

    <!-- 订单信息 -->
    <van-cell title="订单号" :value="order.code" />
    <van-cell title="订单总价" :value="`￥${order.amount}`" />
    <van-cell title="支付方式" :value="order.pay_text" />
    <van-cell title="订单状态" :value="order.status_text" />
    <van-cell title="优惠金额" :value="order.coupon_amount" />
    <van-cell title="下单时间" :value="order.createtime_text" />
    <van-cell title="订单描述" :value="order.remark" />

    <div class="actions">
        <van-button square hairline type="primary" size="large">在线客服</van-button>
        <van-button square hairline type="success" size="large" @click="OrderExpress">物流详情</van-button>
    </div>
</template>

<script setup>
    const { proxy } = getCurrentInstance()

    let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    let product = ref([])
    let address = ref(null)
    let order = ref({})

    onBeforeMount(() => {
        OrderData()
    })

    const OrderData = async () => 
    {
        var params = {
            orderid: orderid,
            busid: proxy.$business.value.id
        }

        var result = await proxy.$POST({
            url: '/order/info',
            params
        })

        if (result.code == 0) {
            proxy.$fail(result.msg)
            return false
        }

        address.value = result.data.address
        order.value = result.data.order

        if(result.data.product)
        {
            result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
        }

        product.value = result.data.product

    }

    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})

    //跳转到物流详情
    const OrderExpress = () => proxy.$router.push({path:'/order/express',query:{orderid:orderid}})

</script>

<style scoped>
    .actions{
        display:flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
</style>